    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>会员系统</title>
    <!--<link rel="stylesheet"-->
    <!--href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>-->
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>
<div class="container">
    <div class="col-sm-12">
        <h1>会员查询</h1>
        <h2>欢迎, <span th:text="${#authentication.name}">Name</span></h2>
    </div>

    <div>
        <h1>点击这个按钮，在没有带Token的情况下获取Resource Server的受保护资源：</h1>
        <input type="button" th:value="我触发没有Token的Ajax请求" onclick="doReuqestWithoutToken()"/>
        <div id="noToken">
            结果展示区
        </div>
    </div>
    <hr>
    <div>
        <h1>点击这个按钮，携带Token的情况下获取Resource Server的受保护资源：</h1>
        <input type="button" th:value="我触发带着Token的Ajax请求" onclick="doReuqestWithToken()"/>
        <div id="hasToken">
            结果展示区
        </div>
    </div>
    <hr>
    <div>
        <h1>点击这个按钮，我刷新令牌</h1>
        <input type="button" th:value="我刷新令牌" onclick="doRefreshToken()"/>
        <div id="refresh">
            结果展示区
        </div>
    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>

    function doReuqestWithoutToken() {
        //发送异步请求
        jQuery.ajax({
            url: "http://mydomin:9090/resources/principal",
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {
            $('#noToken').text(data);
        }).fail(function (data) {
            console.error(data);
        });
    }

    var auth = $.cookie('token');
    var refreshToken = $.cookie('refresh_token');

    function doReuqestWithToken() {
        //发送异步请求
        jQuery.ajax({
            url: "http://127.0.0.1:8083/resources/principal" + "?access_token=" + auth,
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8",

        }).done(function (data) {
            console.log(data);
            $('#hasToken').text(JSON.stringify(data));
        }).fail(function (data) {
            console.error(data);
        });
    }


    function doRefreshToken() {
        //发送异步请求
        jQuery.ajax({
            url: "http://127.0.0.1:8080/oauth/token?grant_type=refresh_token&refresh_token=" + refreshToken,
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            headers: {
                "Authorization": "Basic VUkyOjEyMzQ1"
            },
        }).done(function (data) {
            $('#refresh').text(JSON.stringify(data));
        }).fail(function (data) {
            console.error(data);
        });
    }

</script>
</body>
</html>